import { Button, message } from 'antd';
import { WeaDialog, WeaSearchGroup, WeaLocaleProvider, WeaBrowser, WeaNewScroll, WeaSelect, WeaDatePicker, WeaFormItem, WeaCheckbox, WeaTab } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import '../../../style/index';

const getLabel = WeaLocaleProvider.getLabel;
@observer
class AddCarUseWorkflowDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      id: 0,
      carinfoDivVisible: '',
      relateModeDivVisible: 'none',
      tabkeyParam: 0,
    };
  }

  componentDidMount() {
    const { currentStore } = this.props;
    currentStore.getEditUseCarWorkflowSetInitData({ id: currentStore.carbasicid });
  }

  componentWillReceiveProps(nextProps) {
    // if(this.props.currentStore.editDialogVisible!=nextProps.currentStore.editDialogVisible&&nextProps.currentStore.editDialogVisible==true){
    //   nextProps.currentStore.getEditUseCarWorkflowSetInitData({id:nextProps.currentStore.newWorkflowid});
    // }
  }

  render() {
    const { currentStore } = this.props;
    const { addconditioninfo, form, editDialogVisible } = currentStore;
    const buttonElement = [];
    // buttonElement= [<Button type="primary" onClick={this.onSubmit}>保存</Button>];

    const topTab = [
      {
        color: '#000000',
        groupid: 'editCarUseSet',
        showcount: true,
        title: getLabel(126428, '用车流程设置') + getLabel(611, '添加'),
        viewcondition: 0,
      },
      {
        color: '#000000',
        groupid: 'carInfoRelateMode',
        showcount: true,
        title: getLabel(33084, '字段对应'),
        viewcondition: 1,
      },
    ];

    return (
      <div>
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ujvvh2`}
          className="car"
          title={getLabel(126428, '用车流程设置') + getLabel(611, '添加')}
          visible={editDialogVisible}
          onCancel={this.back}
          style={{ height: 500 }}
          buttons={buttonElement}
          loading="true"
        >
          <WeaTab
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@vu8gq4`}
            datas={topTab}
            buttons={[(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@841j3l@onSubmit`} type="primary" onClick={this.onSubmit}>{getLabel(86, '保存')}</Button>)]}
            keyParam="viewcondition"
            countParam="groupid"
            selectedKey={this.state.tabkeyParam}
            onChange={this.changeTabData.bind(this)}
          />
          <div style={{ display: this.state.carinfoDivVisible, marginTop: 10 }}>
            {this.getEditHTML()}
          </div>

          <div style={{ display: this.state.relateModeDivVisible, marginTop: 10 }}>
            {this.getRelateMode()}
          </div>
        </WeaDialog>
      </div>
    );
  }
  // 编辑车辆设置页面
  getTabHTML = () => {


  }
  // tab页改变事件
  changeTabData = (theKey) => {
    if (theKey == 0) {
      this.setState({
        carinfoDivVisible: '',
        relateModeDivVisible: 'none',
        tabkeyParam: theKey,
      });
    } else {
      this.setState({
        carinfoDivVisible: 'none',
        relateModeDivVisible: '',
        tabkeyParam: theKey,
      });
    }
  }
  // 添加车辆
  getEditHTML = () => {
    const { currentStore } = this.props;
    const { addconditioninfo, addform } = currentStore;
    // const {formid} = workflowData;
    // let formidSpan = "";
    // if(formid){
    //   formidSpan = formid["valueSpan"];
    // }
    const { isFormInit } = addform;
    let height = jQuery('.car .wea-dialog-body').height();
    height = height == undefined ? 440 : height - 80;
    const group = [];
    isFormInit && addconditioninfo.map((c, index) => {
      const items = [];
      c.items.map((fields) => {
        items.push({
          com: (<WeaFormItem
            ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@g77nad@${fields.domkey[0]}`}
            label={`${fields.label}`}
            labelCol={{ span: `${fields.labelcol}` }}
            error={addform.getError(fields)}
            wrapperCol={{ span: `${fields.fieldcol}` }}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@tmqm7n@${fields.domkey[0]}`} fieldConfig={toJS(fields)} form={addform} />
          </WeaFormItem>),
          colSpan: 1,
          hide: fields.hide == 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@c6o10m@${index}`} col={1} needTigger={false} showGroup={c.defaultshow} items={items} />);
    });
    return <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@9brips`} ref="sc2" height={height}>{group}</WeaNewScroll>;
  }
  // 字段对应
  getRelateMode = () => {
    const { currentStore } = this.props;
    const { carInfoRelateModeconditioninfo, carrelatemodeInfoform } = currentStore;
    const addconditioninfo = carInfoRelateModeconditioninfo;
    const addform = carrelatemodeInfoform;
    // const {formid} = workflowData;
    // let formidSpan = "";
    // if(formid){
    //   formidSpan = formid["valueSpan"];
    // }
    const { isFormInit } = addform;
    const group = [];
    let height = jQuery('.car .wea-dialog-body').height();
    height = height == undefined ? 440 : height - 80;
    isFormInit && addconditioninfo.map((c, index) => {
      const items = [];
      let count = 0;
      c.items.map((fields) => {
        count++;
        if (count % 2 != 0) {
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@d44kjf@${fields.domkey[0]}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              error={addform.getError(fields)}
              wrapperCol={{ span: `${fields.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@75f2ne@${fields.domkey[0]}`} fieldConfig={toJS(fields)} form={addform} />
            </WeaFormItem>),
            colSpan: 1,
            hide: true,
          });
        } else {
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@sxtugc@${fields.domkey[0]}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              error={addform.getError(fields)}
              wrapperCol={{ span: `${fields.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@9nkfx5@${fields.domkey[0]}`} fieldConfig={toJS(fields)} form={addform} />
            </WeaFormItem>),
            colSpan: 1,
            hide: false,
          });
        }
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@pyyhpd@${index}`} col={1} needTigger={false} showGroup={c.defaultshow} items={items} />);
    });
    return <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@m2h7ea`} ref="sc" height={height}>{group}</WeaNewScroll>;
  }


  // 打开Dialg
  open = (results) => {
    const { currentStore } = this.props;

    currentStore.carbasicid = results.id;
    currentStore.editDialogVisible = true;
    currentStore.getEditUseCarWorkflowSetInitData({ id: currentStore.carbasicid });
    this.setState({
      visible: true,
      id: results.id,
    });
  }
  // 隐藏关闭Dialg
  back = () => {
    const { currentStore } = this.props;
    currentStore.editDialogVisible = false;
    this.setState({
      visible: false,
    });
  }

  // 添加车辆时保存
  onSubmit = () => {
    if (this.state.tabkeyParam == 0) {
      this.onSaveCarUseSet();
    } else {
      this.onSaveCarRelateMode();
    }
  }

  onSaveCarUseSet = () => {
    const { currentStore } = this.props;
    currentStore.operation = 'add';
    currentStore.doSubmitByEdit({ id: currentStore.carbasicid }, this.onSubmitSuccessCallBack);
  }

  onSubmitSuccessCallBack=() => {
    message.info(getLabel(18758, '保存成功'));
    const { currentStore, parentStore } = this.props;
    parentStore.doTableLoading();
    currentStore.editDialogVisible = false;
  }

  onSaveCarRelateMode=() => {
    const { currentStore } = this.props;
    const checkFields = 'carid,usecarer,startdate,starttime,enddate,endtime,requirednode';
    const isMust = true;
    const chkobj = checkFields.split(',');
    for (let i = 0; i < chkobj.length; i++) {
      if (currentStore.carrelatemodeInfoform.$(`modefieldid_${chkobj[i]}`).value == '') {
        message.error(getLabel(383975, '必要信息不完整，红色标记为必填项！'));
        return;
      }
    }
    currentStore.operation = 'saveFieldRelate';
    currentStore.doSubmitByRelateMode({ id: currentStore.carbasicid, workflowid: currentStore.workflowid }, this.onSubmitSuccessCallBack);
  }
}
export default AddCarUseWorkflowDialog;
